<!-- 应用-游戏 -->
<template>
<div id="games">
  <div
    v-for="game in applicationGames"
    :key="game.value"
    :style="{ backgroundImage: `url(${img[game.value]})` }"
    @click.self="openGameWindow(game.url)"
  >
    {{ game.label }}
  </div>
</div>
</template>

<script>
import { applicationGames } from '@/assets/js/data'

import lineWayImg from '@/assets/img/game/line-way.jpg'

export default {
  name: 'games',
  data() {
    return {
      applicationGames,
      img: {
        lineWay: lineWayImg
      }
    }
  },
  methods: {
    openGameWindow(url) {
      //窗口高度
      const iHeight = 480
      //窗口宽度
      const iWidth = 704
      //获得窗口的垂直位置
      const iTop = (window.screen.availHeight - iHeight) / 2
      //获得窗口的水平位置
      const iLeft = (window.screen.availWidth - iWidth) / 2
      const windowStyle = `height=${iHeight},width=${iWidth},top=${iTop},left=${iLeft},status=no,toolbar=no,menubar=no,titlebar=no,location=no'`
      window.open(url, 'newwindow', windowStyle)
    }
  }
}
</script>

<style lang="stylus">
#games
  > div
    display flex
    justify-content center
    align-items center
    font-size 12px
    font-weight 700
    color #fff
    background-color rgba(0, 0, 0, .2)
    background-size cover
    background-repeat no-repeat
    background-position center
</style>